<template>
  <button @click="show">show</button>
  <div v-show="display" class="pop">
    <span class="close" @click="hide">×</span>
  </div>
</template>
<!--
<script setup>
import {ref} from 'vue';
let display = ref(false);
function show(){
  display.value=true;
}
function hide(){
  display.value=false;
}
</script>
-->
<!--
<script>
import {ref} from 'vue';
export default {
  setup() {
    let display = ref(false);
    function show() {
      display.value = true;
    }
    function hide() {
      display.value = false;
    }
    return {
      display,
      show,
      hide
    }
  }
}
</script>
-->
<script>
export default {
    data(){
      return {
        display:false
      }
    },
    methods:{
      show(){
        this.display=true;
      },
      hide(){
        this.display=false;
      }
    }
}
</script>

<style>
.pop{
  width:300px; height:150px;
  background-color:lightGreen;
}
.pop>.close{
  float:right;
  padding:5px 10px;
}
</style>